<template>
  <v-simple-table dense class="symptoms-container">
    <template v-slot:default>
      <thead>
        <tr>
          <th class="text-left">Serial Number</th>
          <th class="text-left">Item Description</th>
          <th class="text-left">Symptoms</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in propsItems" :key="item.serialNumber">
          <td>{{ item.serialNumber }}</td>
          <td>{{ item.itemDescription }}</td>
          <td>{{ item.symptoms }}</td>
        </tr>
      </tbody>
    </template>
  </v-simple-table>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
@Component({
  props: {
    items: {
      type: Array,
      default: () => [],
    },
  },
})
export default class JobsItemSymptoms extends Vue {
  get propsItems() {
    return this.$props.items;
  }
}
</script>

<style lang="scss">
@import "@/components/Project/Jobs/JobsItemSymptoms.scss";
</style>
